<template>
  <div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div style="padding-left:6px">clone例子,左边往右边拖动试试看</div>
      <div class="col">
        <draggable
          v-model="arr1"
          @end="end1"
          :group="{ name: 'people', pull: 'clone', put: false }"
          :sort="false"
          :clone="onClone1"
          animation="300"
        >
          <transition-group>
            <div
              class="list-group-item"
              v-for="item in arr1"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <span>来呀</span>
        <draggable
          v-model="arr2"
          animation="300"
          group="people"

          @end="end2"
        >
          <div
            class="list-group-item"
            v-for="item in arr2"
            :key="item.id"
          >
            {{ item.name }}
          </div>
        </draggable>
      </div>
    </div>
    <div style="position:fixed;bottom: 0;">
      <div style="padding:10px; border:1px solid black;">
        {{ JSON.stringify(arr1) }}
      </div>
      <div style="padding:10px; border:1px solid black;">
        {{ JSON.stringify(arr2) }}
      </div>
    </div>
  </div>
</template>
<script>
// 导入draggable组件
import draggable from 'vuedraggable'
let initInt = 1000
export default {
  // 注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      // 定义要被拖拽对象的数组
      arr1: [
        { id: 0, name: 'www.itxst.com filter不允许拖拽' },
        { id: 1, name: 'www.itxst.com（不允许停靠）' },
        { id: 2, name: 'www.jd.com' },
        { id: 3, name: 'www.baidu.com' },
        { id: 5, name: 'www.google.com' },
        { id: 4, name: 'www.taobao.com（不允许拖拽）' }
      ],
      arr2: [
        // { id: 11, name: '常用菜单' }
      ],
      moveId: -1
    }
  },
  methods: {
    // 左边往右边拖动时的事件
    end1(e) {
      console.log('end1 ', e)
      var that = this
      var items = this.arr2.filter(function(m) {
        return m.id === that.moveId
      })
      // 如果左边
      if (items.length < 2) return
      this.arr2.splice(e.newDraggableIndex, 1)
    },
    // 右边往左边拖动时的事件
    end2(e) {
      console.log('end2 ', e)
      var that = this
      var items = this.arr1.filter(function(m) {
        return m.id === that.moveId
      })
      // 如果左边
      if (items.length < 2) return
      this.arr1.splice(e.newDraggableIndex, 1)
    },
    // move回调方法
    onMove(e, originalEvent) {
      console.log('onMove', e)
      console.log('onMove 111', originalEvent)
      this.moveId = e.relatedContext.element.id
      // 不允许停靠
      if (e.relatedContext.element.id === 1) return false
      // 不允许拖拽
      if (e.draggedContext.element.id === 4) return false
      if (e.draggedContext.element.id === 11) return false
      return true
    },
    onMove2() {
      return false
    },
    onClone1(originData) {
      initInt = initInt + 1
      const cloneData = JSON.parse(JSON.stringify(originData))
      cloneData.id = initInt
      return cloneData
      // let data = JSON.parse(JSON.stringify(origin))
      // data.id = initInt++
      // console.log(data,'data')
      // return data
    }
  }
}
// Array.prototype.filter =
//   Array.prototype.filter ||
//   function(func) {
//     var arr = this
//     var r = []
//     for (var i = 0; i < arr.length; i++) {
//       if (func(arr[i], i, arr)) {
//         r.push(arr[i])
//       }
//     }
//     return r
//   }
</script>
<style scoped>
/* .itxst {
  margin: 10px;
  text-align: left;
}
.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}
.col + .col {
  margin-left: 10px;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
  text-align: left;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item2 {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: pink;
  text-align: left;
}
.item2 + .item2 {
  border-top: none;
  margin-top: 6px;
}

.item2:hover {
  outline: solid 1px #ddd;
  cursor: move;
} */
</style>
